<template>
  <div class="Recommend">
    <!-- 轮播图 -->
     <div class="banner">
      <Banner :banner="banner"/>     
     </div>  
     <!-- 推荐歌单 -->  
     <RecommendList :personalized="personalized"/>  
		<!-- 最新音乐 -->
		<RecNewSong :newsong="newsong" />
     <!-- 推荐MV -->
		<NewMv :newmv="newmv" />
		<!-- 独家放送 -->
		<Privatecontent :privatecontent="privatecontent" />
  </div>
</template>

<script setup>
// 网络请求
import {  getBanner, getPersonalized, getPrivatecontent,  getNewsong, getNewmv} from "@/network/recommend/recommend.js";
// 子组件
import Banner from "./Childcomps/Banner.vue";
import RecommendList from "./Childcomps/RecommendList.vue";
import RecNewSong from "./Childcomps/RecNewSong.vue";
import NewMv from "./Childcomps/NewMv.vue";
import Privatecontent from "./Childcomps/Privatecontent.vue";
import { ref ,computed,onMounted,watch} from 'vue';
import { mapGetters } from "vuex";

// 定义响应式数据
const banner=ref([]) ; //轮播图数据
const personalized=ref([]); //推荐歌单
const newsong =ref([]); //最新音乐
const privatecontent =ref([]);//独家放送
const newmv =ref([]); //最新MV


const isLogin = computed(() => {
  //从 Vuex 获取 isLogin 的逻辑
  return mapGetters(["isLogin"]);
});

 
onMounted(async () => {
   // 获取轮播图数据
  const res = await getBanner();
  banner.value = res.data.banners;
  await getRecommendBy();
  await getRecOther();
});

//获取推荐歌单数据
const getRecommendBy = async () => {
    const Res = await getPersonalized();
    personalized.value =Res.data.result;  
};


const getRecOther = async () => {
  try {
    // 获取最新音乐
    const newsongRes = await getNewsong(15);
    newsong.value = newsongRes.data.result;

    // 获取独家放送入口数据
    const privatecontentRes = await getPrivatecontent();
    privatecontent.value = privatecontentRes.data.result;

    // 获取推荐MV
    const newmvRes = await getNewmv();
    newmv.value = newmvRes.data.result;
  } catch (err) {
    console.error('获取推荐数据失败', err);
  }
};


watch(isLogin, () => {
  getRecommendBy();
});

</script>

<style>

.banner{
  display: flex;


}

</style>